<template>
  <div class="select">
    <!-- 推荐活动 -->
    <div class="selectItem selectcirclr act">
      <Tabs  size="small" @on-click="selectact">
        <TabPane
           v-for="(item, index) in active"
          :label="item.lable"
          :name="item.name"
          :key="index"
        >
          <!-- <div class="lookall" @click="toActivePage">查看全部</div> -->
          <activeplace :activeData="selectactType" v-if="selectactType=='1'"></activeplace>
          <myjoinactiveplace v-if="selectactType=='2'" :allcirclelist="myjoinlist"></myjoinactiveplace>

        </TabPane>
        <template #extra>
          <div class="lookall" @click="toActivePage">查看全部</div>
        </template>
      </Tabs>
    </div>
    <!-- 推荐明星 好友-->
    <div class="selectItem">
      <Tabs  size="small" @on-click="select">
        <TabPane
          :label="item.title"
          :name="item.name"
          v-for="(item, index) in list"
          :key="index"
        >
          <recpeople  @addfriend="addfriend" :classData="classData"></recpeople></TabPane>
        <template #extra>
          <div class="lookall" @click="gotofriend()">查看全部</div>
        </template>
      </Tabs>
    </div>
    <!-- 推荐圈子 -->
    <div class="selectItem selectcirclr">
      <Tabs  size="small" @on-click="selectCircle">
        <template #extra>
          <div class="lookall" @click="gotocircle()">查看全部</div>
        </template>
        <TabPane
          v-for="(item, index) in circleList"
          :label="item.lable"
          :name="item.name"
          :key="index"
        >
          <reccircle :allcirclelist="allcirclelist" v-if="circlrType=='1'" @upquanziList="upquanziList"></reccircle>
          <myjoinreccircle v-if="circlrType=='2'" :mycirclelist="mycirclelist"></myjoinreccircle>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import recpeople from "./sideright/recpeople.vue";
import reccircle from "./sideright/reccircle.vue";
import activeplace from "./sideright/activeplace.vue";
import myjoinactiveplace from './sideright/myjoinactiveplace.vue';
import myjoinreccircle from './sideright/myjoinreccircle'
import { useraddindex ,pactivity,usactivity,allquanzi,ourquanzi} from "@/api/community";
export default {
  components: {
    recpeople,
    reccircle,
    activeplace,
    myjoinactiveplace,
    myjoinreccircle
  },
  data() {
    return {
      //分类的·数据
      classData:[],
      activeData:[],
      myjoinlist:[],
      // 右边的圈子（全部）
      allcirclelist:[],
      // 右边圈子（我的）
      mycirclelist:[],
      list: [ ],
      selectType: "max",
      circlrType: "1",
      selectactType: "1",
      circleList: [
        {
          lable: "全部",
          name: "1",
        },
        {
          lable: "我加入的",
          name: "2",
        },
      ],
      active: [
        {
          lable: "全部活动",
          name: "1",
        },
        {
          lable: "我参加的活动",
          name: "2",
        },
      ],
    };
  },
  watch: {
    selectType() {
      this.getstarList();
    },
    selectactType(val) {

      if(val == 1) {
      } else {
        this.myjoinactive();
      }
    }
  },

  mounted() {
    this.getstarList();
    this.getactlist();
    this.myjoinactive();
    this.getcircleall();
    this.getmycircle()
  },
  methods: {
    upquanziList(){
      this.getcircleall();
    },
    addfriend(){

      this.getstarList();
    },
    // 获取明星好友右边列表
    getstarList() {
      useraddindex({
        mid: JSON.parse(localStorage.userInfo).id,
        type: this.selectType,
        page: 1,
        pagesize: 10,
      }).then((res) => {

        console.log(this.selectType,'我的列表',res);
        //设置默认id
         this.selectType =
          this.selectType == "" ? res.typelist[0].id : this.selectType;
          //数据
          this.classData=res.data.slice(0,3)
          // console.log( res,'classdata');
          //导航栏
          if(this.list.length <= 0) {
            this.list = res.typelist
            this.list.unshift({
              id:'max',
              title: '推荐'
            });
          }
      });
    },
    // 获取活动右边列表(全部活动)
    getactlist(){
      pactivity({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 10,
      }).then(res=>{
        for (let i = 0; i < 3; i++) {
          this.activeData.push(res.data[i])
          // console.log(this.activeData,'活动');
        }
      })
    },
    // 获取活动右边列表(我参加的活动)
    myjoinactive(){
      usactivity({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize:3,
      }).then(res=>{
        // console.log(res,'我参加的活动');
        this.myjoinlist = res.data

      })
    },
    // 获取圈子右边列表（全部圈子信息）
    getcircleall(){
      allquanzi({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 3,
      }).then(res=>{
        this.allcirclelist = res.circledata;
        console.log(this.allcirclelist,'所有圈子');
      })
    },
    // 获取圈子右边列表（我的圈子信息）
    getmycircle(){
      ourquanzi({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 3,
      }).then(res=>{
        this.mycirclelist = res.circledata
        console.log(this.allcirclelist,'我参加的圈子');
      })
    },
    // 获取右边的明星
    select(v) {
      this.selectType=this.list[v].id
    },
    // 获取右边的圈子
    selectCircle(v) {
      // console.log(v,'shuju ');
      // this.circlrType = v;
      // console.log(this.circleList[v-1].name,'圈子点击');
      this.circlrType = this.circleList[v-1].name;
      console.log(this.circlrType,'圈子');
      if(this.circlrType == 2) {
        this.getmycircle()
      }
    },
    // 获取右边的关注
    selectact(v) {
      console.log(this.active[v-1].name,'关注点击');
      this.selectactType = this.active[v-1].name;
    },
    // 跳转圈子
    gotocircle() {
      this.$router.push({
        path: "/joincircle",
      });
    },
    // 跳转至朋友
    gotofriend() {
      console.log("123");
      this.$router.push({
        path: "/addfriends",
      });
    },
    // 跳转至活动
    toActivePage() {
      this.$router.push("/active-index");
    },
  },
};
</script>

<style lang="scss" scoped>
.select {
  .selectItem {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .selectcirclr {
    margin-top: 10px;
  }
  .lookall {
    margin-right: 20px;
    text-align: right;
    color: #878583;
    cursor: pointer;
    height: 33px;
    line-height: 33px;
  }
  // .act{
  //   position: relative;
  //   .lookall{
  //     position: absolute;
  //     top: -40px;
  //     right: 0;
  //     color: #878583;
  //     cursor: pointer;
  //   }
  // }
}
</style>
